<template>
  <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="form.name" style="width:80%" placeholder="2-10个字符" />
    </el-form-item>
    <el-form-item label="部门编码" prop="code">
      <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门负责人" prop="manager">
      <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
        <el-option v-for="item in peoples" :key="item.id" :value="item.username" :label="item.username" />
      </el-select>
    </el-form-item>
    <el-form-item label="部门介绍" prop="introduce">
      <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
      <el-button size="small" @click="hCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { getEmployeeSimple } from '@/api/employees'
import { addDepartments, getDepartDetail, updateDepartments } from '@/api/departments'
export default {
  props: {
    curId: {
      required: true, // 必传
      type: String // 字符串类型
    },
    isEdit: {
      type: Boolean,
      required: true
    },
    allList: {
      type: Array,
      required: true
    }
  },
  data() {
    const validateCode = (rule, value, callback) => {
      //  需求: code不能重复,并且如果是编辑弹层 则把value在codeList中移出
      //  可以使用indexOf查找索引再用splice方法删除
      //  还可以用filter筛选出不等于value的数组
      //   this.isEdit ? codeList.splice(codeList.indexOf(value), 1)
      const codeList = this.isEdit ? this.allList.map(item => item.code).filter(item => item !== this.oldCode) : this.allList.map(item => item.code)
      // console.log('输入的code', value)
      // console.log('要排除的code', this.oldCode)
      //   console.log(codeList)
      //   if (codeList.indexOf(value) === -1) {
      //     //   没有重复值 通过校验
      //   callback()
      //   } else {
      //     return callback(new Error('当前code码重复'))
      //   }
      codeList.indexOf(value) === -1 ? callback() : callback(new Error('当前code码重复'))
    }
    const validateName = (rule, value, callback) => {
      // 通过父级id查找子元素pid相等的元素 把这些元素筛选出来判断填写的name是否和这些元素的某一个name相等 若相等就重复
      // 筛选出当前节点的数据 本来是一个数组 里面是节点的每一个对象 所以需要把每个对象map循环返回出来
      // 根据父级部门id找到它的pid
      const child = this.allList[this.allList.map(item => item.id).indexOf(this.curId)]
      // 如果点击头部添加部门 属于一级树形结构 没有pid 所以需要判断手动赋值
      const pid = child === undefined ? '' : child.pid
      // console.log(pid)
      // 筛选出编辑弹层需要校验的数组(同级部门的数组)
      const parent = this.allList.filter(item => item.pid === pid).map(item => item.name)
      // console.log(parent)
      // console.log(parent.filter(item => item !== value))
      // 需求: 如果是编辑弹层 把同级节点筛选出来
      // 三元表达式判断是否是编辑弹层
      // this.allList.filter(item => item.pid === this.curId).map(item => item.name) 只能用来判断子节点
      // console.log('要排除的值', this.oldName)
      const arr = this.isEdit ? parent.filter(item => item !== this.oldName) : this.allList.filter(item => item.pid === this.curId).map(item => item.name)
      // console.log('要验证的值', value)
      // console.log('已经zhany的zh', arr)
      // 判断 这些数据中的name是否和表单输入的name相同
      arr.indexOf(value) === -1 ? callback() : callback(new Error('当前部门名重复'))
    }
    return {
      // 表单数据
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      peoples: [],
      //   表单校验
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: ['blur', 'change'] },
          { min: 2, max: 10, message: '部门名称要求2-10个字符', trigger: ['blur', 'change'] },
          { validator: validateName, trigger: ['blur', 'change'] }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: ['blur', 'change'] },
          { validator: validateCode, trigger: ['blur', 'change'] }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: ['blur', 'change'] }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: ['blur', 'change'] }
        ]
      },
      oldCode: '', // 请求返回的详情数据
      oldName: ''

    }
  },
  // 页面初始化后调用接口
  created() {
    // console.log(1)
    // 部门负责人下拉列表
    this.loadEmployee()
    // 详情
    this.particulars()
  },
  methods: {
    // 详情
    async particulars() {
      // 判断是否是编辑弹层
      if (this.isEdit) {
      // 调接口获取文章详情数据
        const res = await getDepartDetail(this.curId)
        // console.log(res)
        // 回填表单数据
        this.form = res.data
        // 这里要分别取值 否则是浅拷贝 表单值发生变化会影响这里
        this.oldCode = res.data.code
        this.oldName = res.data.name
      }
    },
    // 部门负责人下拉列表
    async loadEmployee() {
      // console.log(111)
      const res = await getEmployeeSimple()
      // console.log(res)
      // 把获取到的数据保存在peoples里面并循环渲染部门负责人的下拉列表
      this.peoples = res.data
      // console.log(this.curId)
    },
    // 封装添加子部门函数
    async doAdd() {
      // 获取员工详情信息
      this.loadEmployee()
      // 调接口发请求 传入表单内容和上级部门id
      await addDepartments({ ...this.form, pid: this.curId })
      // 通知父组件 关弹层 更新视图
      this.$emit('update-depart')
    },
    // 封装更新详情
    async doEdit() {
      await updateDepartments(this.form)
      //   console.log(res)
      //   console.log(this.form)
      // 通知父组件 关弹层 更新视图
      this.$emit('update-depart')
    },
    //   点击确定 发送请求提交表单
    hSubmit() {
    //   console.log(this.form)
      // console.log(111)
      // 兜底表单验证
      //   第一种写法
      //   this.$refs.formRef.validate(valid => {
      //     if (valid) {
      //       if (this.isEdit) {
      //         //   编辑弹层
      //         this.doEdit()
      //         this.$message.success('更新部门成功')
      //       } else {
      //         //  验证通过
      //         this.doAdd()
      //         this.$message.success('添加部门成功')
      //       }
      //     } else {
      //       this.$message.success('操作失败')
      //     }
      //   })
      //  第二种写法
      // !valid ? this.$message.error('请正确填写') : this.doAdd() && this.$message.success('添加部门成功')
      //   this.$refs.formRef.validate(valid => {
      //     if (valid) {
      //       this.isEdit ? this.doEdit() && this.$message.success('更新部门成功') : this.doAdd() && this.$message.success('添加部门成功')
      //     } else {
      //       this.$message.success('操作失败')
      //     }
      //   })
      //   第三种写法
      this.$refs.formRef.validate(valid => {
        valid ? (this.isEdit ? this.doEdit() && this.$message.success('更新部门成功') : this.doAdd() && this.$message.success('添加部门成功')) : this.$message.success('操作失败')
      })
    },
    // 点击取消
    hCancel() {
      // console.log(222)
      // 通知父组件 关弹层
      this.$emit('update-depart')
      // // 清除校验残留
      //   对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      // this.$refs.formRef.resetFields()
    }
  }
}
</script>

<style>

</style>
